<template>
    <el-dialog
      :title="title"
      :closeOnClickModal="false"
      :visible.sync="show"
      width="650px">
      <el-form 
        label-position="right" 
        :model="selectTable"
        ref="addForm" 
        label-width="80px" 
        :inline="false"
        autocomplete="off"
        >
        <el-row>
          <el-col>
            <el-form-item label="标签">
            {{selectTable.tagname}}
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="selectTable.tabs!==undefined">
            <el-form-item label="模板" prop="cur" :rules="[rule[0]]">
            <el-select v-model="selectTable.cur" placeholder="请选择">
              <el-option
                v-for="(item,index) in selectTable.tabs.split('#')"
                :key="index"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="selectTable.columnIds!==undefined">
            <el-form-item label="类别" prop="columnIds" :rules="[rule[0]]">
              <cateSelectMultiple v-model="selectTable.columnIds"></cateSelectMultiple>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="selectTable.columnId!==undefined">
            <el-form-item label="类别" prop="columnId" :rules="[rule[0]]">
              <cateSelectSingle v-model="selectTable.columnId"></cateSelectSingle>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="selectTable.leafletId!==undefined">
            <el-form-item label="单页" prop="leafletId" :rules="[rule[0]]">
              <leafletSelectSingle v-model="selectTable.leafletId"></leafletSelectSingle>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="selectTable.sort!==undefined">
            <el-form-item label="排序" prop="sort" :rules="[rule[0]]">
            <el-select v-model="selectTable.sort" placeholder="请选择">
              <el-option
                v-for="item in sort"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="selectTable.locationLevel!==undefined">
            <el-form-item label="推荐" prop="locationLevel" :rules="[rule[0]]">
            <el-select v-model="selectTable.locationLevel" placeholder="请选择">
              <el-option
                v-for="(item, index) in locationLevel"
                :key="index"
                :label="item"
                :value="index + ''">
              </el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="selectTable.showImg!==undefined">
            <el-form-item label="图片" prop="showImg" :rules="[rule[0]]">
            <el-select v-model="selectTable.showImg" placeholder="请选择">
              <el-option
                v-for="item in showImg"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="selectTable.start!==undefined">
            <el-form-item label="起点" prop="start" :rules="[rule[0]]">
              <el-input-number style="width:150px" v-model="selectTable.start" controls-position="right" :min="1" :max="1000000"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="selectTable.count!==undefined">
            <el-form-item label="数量" prop="count" :rules="[rule[0]]">
              <el-input-number style="width:150px" v-model="selectTable.count" controls-position="right" :min="1" :max="1000000"></el-input-number>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" v-loading="pload">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
      </div>
    </el-dialog>
</template>

<script>
import * as api from '@/utils/api'
export default {
  components: {
    cateSelectMultiple: () => import('../sysCate/cateSelectMultiple'),
    cateSelectSingle: () => import('../sysCate/cateSelectSingle'),
    leafletSelectSingle: () => import('../sysPage/selectSingle')
  },
  props: {
    data: Object
  },
  created() {
    this.selectTable = this.JSONs(this.data)
  },
  watch: {
    show(newVal) {
      this.$parent.editSet = false
    }
  },
  computed: {
    title() {
      return '标签设置'
    }
  },
  data() {
    return {
      pload: false,
      showImg: [
        {
          label: '不限',
          value: '-1'
        },
        {
          label: '无图',
          value: '1'
        },
        {
          label: '有图',
          value: '0'
        }
      ],
      locationLevel: [
        '不限',
        '一级推荐',
        '二级推荐',
        '三级推荐',
        '四级推荐',
        '五级推荐'
      ],
      sort: [
        {
          label: '时间降序',
          value: 'update_time desc'
        },
        {
          label: '时间升序',
          value: 'update_time'
        },
        {
          label: '热度降序',
          value: 'heat desc'
        },
        {
          label: '热度升序',
          value: 'heat'
        }
      ],
      rule: [
        { required: true, message: '必填项', trigger: 'change' }
      ],
      show: true,
      selectTable: {}
    }
  },
  methods: {
    async submitForm(formName) {
      await this.$refs[formName].validate()
      try {
        this.pload = true
        const param = {}
        param.uuid = this.selectTable.uuid
        param.templteId = this.selectTable.templteId
        param.content = JSON.stringify(this.selectTable)
        await api.templetLookSave(param)
        this.$notify({ title: '操作成功', type: 'success', duration: 5000 })
        this.$parent.editSet = false
        this.$parent.getData()
      } catch (e) {
        this.pload = false
      }
    }
  }
}
</script>